<!--
 @description 经销商门店信息
 @fileName Shop.vue
 @author zengqiongying
 @created 2023/04/28 13:54:59
-->
<template>
  <div class="has-foot-pb">
    <Card>
      <template #title>
        <div class="card-header">
          <span class="name"><span class="icon"></span>{{ shopInfo.code }} {{ shopInfo.name }}</span>
        </div>
      </template>
      <Cell title="所在省市区" custom readonly :modelValue="shopCityName" />
      <ShopItem v-model="formData" hide-name hide-city />

      <Cell v-if="showReason" title="变更原因" is-column custom divider :right="false" required>
        <qmp-field v-model="formData.reason" type="textarea" placeholder="输入内容" class="ctm-text-area" />
      </Cell>
    </Card>
    <div :class="['ctm-content-foot', { relative: keyboard.show }]">
      <div class="btn radius-larg ctm-btn-main" @click="onSave()">保存</div>
    </div>
  </div>
</template>

<script lang="ts">
  import { reactive, toRefs, getCurrentInstance, nextTick, computed } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import Card from '@/components/Card/index.vue'
  import Cell from '@/components/Cell/index.vue'
  import ShopItem from '../components/Shop/Item.vue'
  import { getCustomerShopDetail, saveCustomerShop } from '@/apis/dealerMarketing/ArchiveChange'
  import GetKeyboardMixin from '@/utils/useKeyboard'

  const none: any[] = [null, undefined, '']
  interface datasModle {
    [key: string]: any
  }
  export default {
    name: 'DealerArchiveChangeShop',
    components: { Card, Cell, ShopItem },
    setup() {
      const { proxy }: any = getCurrentInstance()
      const $router = useRouter()
      const $route = useRoute()

      const datas = reactive<datasModle>({
        changeCode: $route.query.changeCode || '',
        shopCode: $route.query.shopCode || '',
        shopCityName: '',
        shopInfo: {
          code: '',
          name: '',
          shopClassify: '',
          shopClassifyName: '',
          shopAddr: '',
          cityLevel: '',
          cityLevelName: '',
          marketLevelCode: '',
          marketLevelName: ''
        },
        formData: {
          shopClassify: '',
          shopClassifyName: '',
          shopAddr: '',
          cityLevel: '',
          cityLevelName: '',
          marketLevelCode: '',
          marketLevelName: '',
          reason: ''
        }
      })
      datas.keyboard = {
        show: false
      }
      datas.keyboard = GetKeyboardMixin()

      const showReason = computed(() => {
        return datas.shopInfo.cityLevel !== datas.formData.cityLevel
      })

      const onSave = () => {
        let flag = false
        const d = datas.formData
        const list = []
        const fildObj: datasModle = {
          shopClassify: '门店类型',
          shopClassifyName: '门店类型名称',
          shopAddr: '详细地址',
          cityLevel: '城市级别',
          cityLevelName: '城市级别名称',
          marketLevelCode: '市场层级',
          marketLevelName: '市场层级名称'
        }
        const commonParams = {
          changeCode: datas.changeCode,
          code: datas.shopInfo.code,
          name: datas.shopInfo.name
        }
        for (const [k, name] of Object.entries(fildObj)) {
          const val = d[k]
          if (none.includes(val)) {
            flag = true
          }
          const beforeValue = datas.shopInfo[k]
          const isChange = beforeValue === val ? 0 : 1
          const newParams: { [key: string]: any } = {
            fieldCode: `${k}`,
            fieldName: name,
            afterValue: val,
            beforeValue,
            isChange
          }
          if (showReason.value && ['cityLevelName', 'cityLevel'].includes(k)) {
            newParams.reason = d.reason
          }
          list.push({ ...commonParams, ...newParams })
        }
        if (showReason.value) {
          flag = [null, undefined, ''].includes(d.reason)
        }
        if (flag) {
          proxy.$toast('请检查必填项是否填写完整')
          return
        }

        saveCustomerShop(list, datas.changeCode).then((res: any) => {
          if (res.success === 1) {
            proxy.$toast('保存成功')
            proxy.$SimpleEvents.emit('refreshCustomerChangeEditInfo', datas.id)

            nextTick(() => {
              $router.goBack()
            })
          }
        })
      }

      const getInfo = () => {
        const params = {
          changeCode: `${datas.changeCode}`,
          shopCode: `${datas.shopCode}`
        }
        getCustomerShopDetail(params).then((res: any) => {
          const list = res.data || []
          list.forEach((v: any) => {
            const k = v.fieldCode
            datas.formData[k] = v.afterValue || v.beforeValue
            datas.shopInfo[k] = v.beforeValue || ''
            if (v.fieldCode === 'cityLevel') {
              datas.formData.reason = v.reason || ''
            }
          })
          if (list.length > 0) {
            const d = list[0]
            datas.shopInfo.name = d.name
            datas.shopInfo.code = d.code
            datas.shopCityName = `${d.provinceName || ''}${d.cityName || ''}${d.countyName || ''}${d.townName || ''}`
          }
        })
      }

      getInfo()

      return {
        ...toRefs(datas),
        showReason,
        onSave
      }
    }
  }
</script>
<style lang="less" scoped>
  @import url('../styles/common.less');
</style>
